﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <!--<script language="javascript" type="text/javascript" src="../Content/JS/Tween.js"></script>-->
        <!--<script language="javascript" type="text/javascript" src="../Content/JS/jquery.tooltip.js"></script>-->
        <script type="text/javascript" src="../Content/JS/Calendar/mootools.js"></script>
    <script language="javascript" type="text/javascript" src="../Content/JS/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../Content/JS/Calendar/calendar.rc4.js"></script>
	<script type="text/javascript">
	    //<![CDATA[
	    window.addEvent('load', function() {

	        myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1, tweak: { x: 3, y: -3} });
	        alert(1);
	    });
	    //]]>
	</script>

	<link rel="stylesheet" type="text/css" href="../Content/JS/Calendar/Css/dashboard.css" media="screen" />
    <style type="text/css" >
    
        
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 0px;
  display: block;
  margin-right: 0px;

}

ul li a{
  display: block;
  overflow: hidden;
  height: 300px;
  width: 30px;
}

#a1{
  width: 490px;
}

ul li img{
  position: absolute;
  border: 0px;
}

ul li div{
  margin: 0;
  padding: 0;
  width: 500px;
  display: block;
  margin-left: 35px;
  
}


    </style>
    <script  type="text/javascript" language="javascript">
     
        jQuery.noConflict();

        jQuery(document).ready(function() {
        lastBlock = jQuery("#a1");
            maxWidth = 500;
            minWidth = 30;

            jQuery("ul li a").hover(
      function() {
            jQuery(lastBlock).animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
            jQuery(this).animate({ width: maxWidth + "px" }, { queue: false, duration: 400 });
          lastBlock = this;
      }
    );
  });
    
    </script>
</head>
<body>

<div style="border:1px solid black;  width:590px; height:300px">
<ul>
  <li>
    <a id="a1">
      <img src="tab1.jpg" />
      <div>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
        <br />
        xzcdsfdsaf e
      </div>
    </a>
  </li>
  <li>
    <a>
       <img src="tab1.jpg" />
       <div>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </div>
    </a>
  </li>
  <li>
    <a>
      <img src="tab1.jpg" />
      <div>
        <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
      </div>
    </a>
  </li>
    <li>
    <a>
      <img src="tab1.jpg" />
      <div>
             <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
              </div>
    </a>
  </li>
</ul>
</div>
<div style="width:400px;">
	

			<label for="date2">Date</label>
			<input id="date2" name="date2" type="text" />
	

	
	</div>
</body>
</html>
